<template>
   <div class="extensionMyTeam">
      <myHead title="我的团队"></myHead>
      <div class="head">
        {{allPeople}}人
      </div>
      <!-- 推广信息 -->
      <div class="tg-info">
         <div class="tg-info-tit">
            <p>微信头像</p>
            <p>微信昵称</p>
            <p>绑定日期</p>
         </div>
         <div class="tg-user-list" :style="{height:$store.state.minHeight-2.3+'rem'}">
            <div class="tg-user-item" v-for="(x,y) in userList">
               <p><img :src="x.avatar" alt=""></p>
               <p>{{x.nickname}}</p>
               <p>{{x.relation_time | formatDate}}</p>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    import {formatDate} from '../../methods/time'
    export default {
        name: "extensionMyTeam",
        filters: {
            formatDate(time) {
                time = time * 1000;
                let date = new Date(time);
                return formatDate(date, 'yyyy/MM/dd')
            }
        },
        components:{
            myHead
        },
        data(){
            return {
                userList:[], // 团队列表
                allPeople:0, // 总人数
            }
        },
        created(){
            window.addEventListener('beforeunload', e => this.beforeunloadFn(e));
            this.$myAxios('index/share/group','post',{
                user_id:this.$myStorage.query(),
            }).then(res=>{
                console.log(res.data);
                if (res.data.state == '1') {
                    this.userList = res.data.relation;
                    this.allPeople = res.data.statistics.nnt;
                } else {
                    this.$myNotice('请检查网络!',1500);
                }
            });
        },
        mounted() {
            console.log(this.$store.state.userInfo.username)
        },
        methods:{
            beforeunloadFn(e) {
                console.log('刷新或关闭')

                // ...
            }
        },
        destroyed() {
            window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
        }

    }
</script>

<style scoped>
   .extensionMyTeam {
      padding-top: .5rem;
   }
   .head {
      height: 1.3rem;
      background:linear-gradient(176deg,rgba(255,141,65,1),rgba(255,109,0,1));
      font-size:.3rem;
      font-family:Source Han Sans CN;
      font-weight:500;
      color: #FFFFFF;
      text-align: center;
      line-height: 1.3rem;
   }
   .tg-user-list {
      overflow-x: hidden;
   }
   .tg-info-tit {
      height: .5rem;
      background: #F5F5F5;
      display: flex;
      flex-flow: row;
      align-items: center;
   }
   .tg-info-tit>p {
      width: calc(100% / 3);
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #333333;
      text-align: center;
   }
   .tg-user-item {
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      height: .5rem;
      box-sizing: border-box;
      border-bottom: .01rem solid #F5F5F5;
   }
   .tg-user-item>p {
      width: calc(100% / 3);
      text-align: center;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #333333;
   }
   .tg-user-item>p:nth-child(1)>img {
      width: .32rem;
      height: .32rem;
      border-radius: 50%;
   }
</style>
